<template>
  <div class="showlistarea">
       <div class="toplist">
           <div @click="tocancel">清除</div>
           <div @click="totrue">确定</div>
       </div>
       <div class="itemlist">
           <div class="item">
               <input placeholder="请输入" v-model="areafirst" type="text"/>
               <span class="s-t-l">区</span>
           </div>
       </div>
        <div class="itemlist">
           <div class="item">
               <input placeholder="请输入"  v-model="areatwo" type="text"/>
               <span class="s-t-l">楼</span>
           </div>
        </div>
        <div class="itemlist">
           <div class="item">
               <input  placeholder="请输入" v-model="areathree"  type="text"/>
               <span class="s-t-l">层</span>
           </div>
        </div>
        <div class="itemlist">
           <div class="item">
               <input  placeholder="请输入" v-model="areafour" type="text"/>
               <span class="s-t-l">轴</span>
           </div>
        </div>
  </div>

</template>

<script>
export default {
  name: 'App',
  data () {
      return {
           areafirst:"",
           areatwo:"",
           areathree:"",
           areafour:""
      }
 },
  components: {
     
  },
  created() {
   
  },
  methods:{
     totrue(){
         if(!this.areafirst){
            this.$vux.toast.text('请输入区');
             this.$emit("changemsg","","")
            return false;
         }
         if(!this.areatwo){
            this.$vux.toast.text('请输入楼');
             this.$emit("changemsg","","")
            return false;
         }
         if(!this.areathree){
            this.$vux.toast.text('请输入层');
            this.$emit("changemsg","","")
            return false;
         }
         if(!this.areafour){
            this.$vux.toast.text('请输入轴');
            this.$emit("changemsg","","")
            return false;
         }
         let string = `${this.areafirst}区${this.areatwo}楼${this.areathree}层${this.areafour}轴`;
         let stringshow = `${this.areafirst}◇${this.areatwo}◇${this.areathree}◇${this.areafour}`
         this.$emit("changemsg",string,stringshow)
     },
     tocancel(){
           this.areafirst ="";
           this.areatwo = "";
           this.areathree = "";
           this.areafour = "";
           this.$emit("canclechange")
     }
  }

}
</script>

<style scoped lang="less">
.main1{
  background-color:#fff;
}
.toplist{
    padding:0 20px;
    height:40px;
    line-height:40px;
    background:#fff;
    border-bottom:1px solid #ccc;
    display:flex;
    justify-content: space-between;
}
.itemlist{
    padding:0 20px;
    height:40px;
    line-height:40px;
    background:#fff;
    border-bottom:1px solid #ccc;
    padding-bottom:2px;
}
.itemlist>.item{
    display:flex;
   width:100%;
}
.item > input{
    width:calc(100% - 40px);
    height:38px;
    line-height:38px;
}
.s-t-l{
    // float:right;
    width:40px;
    text-align:right;
}
</style>
